<template>
	<div style="padding: 50px 30px; height: 100vh;background-color: white;">
		<div style="display: flex;justify-content: center;">
			<img src="@/assets/img/h5_logo.png" style="width: 114px;height: 114px;" alt="">
		</div>
		<div style="text-align: center;font-size: 17px;margin-bottom: 30px;">欢迎登录东家保</div>
		<div class="login-card" style="padding: 0;" v-if="state == 1">
			<div class="login-title" style="color: black;text-align: start;font-size: 20px;">手机密码登录</div>
			<div class="login-label" style="margin-top: 20px;font-size: 17px;">手机号码</div>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input"
				style="border: none; outline: none; margin-top: 10px;font-size: 17px;" />
			<div class="login-label" style="margin-top: 20px;font-size: 17px;">登录密码</div>
			<input v-model="password" placeholder="请输入登录密码" type="password"
				style="border: none;margin-top: 10px;outline: none;font-size: 17px;" class="login-input" />
		</div>
		<div style="margin-top: 20px;display: flex;align-items: center;" @click="rememberPsw = !rememberPsw"
			v-if="state == 1">
			<img v-if="rememberPsw" src="@/assets/img/form-shen.png" class="form-rich-warning-icon" />
			<div class="form-rich-shen-no" v-else></div>
			<span style="margin-left: 5px;font-size: 15px;">记住密码</span>

		</div>
		<!-- <checkbox-group v-if="state == 1" @change="rememberC" class="rememberStyle" style="margin-top: 10px;">
			<label>
				<checkbox value="true" checked="true" />记住密码
			</label>
		</checkbox-group> -->
		<div class="login-btn" @click="submitLogin()"
			style="margin-top: 60px;height: 52px;line-height: 52px;border-radius: 30px;font-size: 17px;"
			v-if="state == 1">立即登录</div>
		<!-- <div class='text-box' v-if="state == 1">
			<div class="text-left-box" @tap="forgot()">忘记密码</div>
			<div class="text-right-box" @tap="reg()">立即注册</div>
		</div> -->
		<div class="login-card" v-if="state == 2">
			<div class="login-title">账号注册</div>
			<div class="login-label">用户名</div>
			<el-input v-model="user_name" placeholder="请输入用户名"></el-input>
			<!-- <input v-model="user_name" placeholder="请输入用户名" class="login-input" /> -->
			<div class="login-label">手机号码</div>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input" />
			<div class="login-label">登录密码</div>
			<input v-model="password" placeholder="请输入登录密码" type="password" class="login-input" />
			<div class="login-label">验证码</div>
			<div class="login-input-box">
				<input v-model="code" placeholder="请输入验证码" class="login-input" />
				<div class="login-input-btn" @tap="getCode()">{{ second == 60 ? '发送验证码' : second + 's后发送' }}</div>
			</div>

		</div>
		<div class="login-btn" @tap="submitReg()" v-if="state == 2">立即注册</div>
		<div class='text-box' v-if="state == 2">
			<div class="text-left-box" @tap="forgot()">忘记密码</div>
			<div class="text-right-box" @tap="login()">立即登录</div>
		</div>
		<div class="login-card" v-if="state == 3">
			<div class="login-title">重置密码</div>
			<div class="login-label">手机号码</div>
			<input v-model="mobile" placeholder="请输入手机号码" class="login-input" />
			<div class="login-label">新密码</div>
			<input v-model="password" placeholder="请输入新密码" type="password" class="login-input" />
			<div class="login-label">验证码</div>
			<div class="login-input-box">
				<input v-model="code" placeholder="请输入验证码" class="login-input" />
				<div class="login-input-btn" @tap="getCode()">{{ second == 60 ? '发送验证码' : second + 's后发送' }}</div>
			</div>
		</div>
		<div class="login-btn" @tap="submitForgot()" v-if="state == 3">立即重置</div>
		<div class='text-box' v-if="state == 3">
			<div class="text-left-box" @tap="login()">立即登录</div>
			<div class="text-right-box" @tap="reg()">立即注册</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			state: 1,
			mobile: '',
			password: '',
			user_name: '',
			code: '',
			second: 60,
			timer: '',
			no: '',
			rememberPsw: true,
			argeeUser: true,
			allowPrefix: ''
		}
	},
	onLoad(e) {
		if (e.no) {
			this.no = e.no;
			if (this.no) {
				this.saveNo();
			}
		}
	},
	mounted() {
		var viewport = document.querySelector('meta[name="viewport"]');
		viewport.setAttribute('content', 'width=device-width,' +
			'initial-scale=1.0' +
			'user-scalable=yes,shrink-to-fit=no');
		const mobileS = localStorage.getItem('mobileS');
		const passwordS = localStorage.getItem('passwordS');
		console.log(mobileS);
		console.log(passwordS);
		//有账号、密码就赋值给文本，没有就清空
		if (mobileS && passwordS) {
			this.mobile = mobileS;
			this.password = passwordS;
		}
	},
	methods: {
		rememberC(e) {
			e.target.value[0] ? this.rememberPsw = true : this.rememberPsw = false
			console.log(this.rememberPsw);
		},
		argeeUserC(e) {
			e.target.value[0] ? this.argeeUser = true : this.argeeUser = false
			console.log(this.argeeUser);
		},
		forgot() {
			this.state = 3;
			this.password = '';
			this.code = '';
			this.sencond = 60;
			this.timer = '';
		},
		reg() {
			this.state = 2;
			this.password = '';
			this.code = '';
			this.sencond = 60;
			this.timer = '';
		},
		login() {
			this.state = 1;
			this.password = '';
			this.code = '';
			this.sencond = 60;
			this.timer = '';
		},
		loginDo() {
			if (!this.mobile) return this.toast(0, '请输入手机号码');
			if (this.mobile.length != 11) return this.toast(0, '请输入正确的手机号码');
			if (!this.code) return this.toast(0, '请输入验证码');
			this.ajaxs('login/loginDo', {
				data: {
					mobile: this.mobile,
					code: this.code,
					no: this.no
				},
				success: (res) => {
					console.log(res);
					this.toast(0, res.msg);
					if (res.code) {

						setTimeout(() => {
							this.$router.push('/index/index/index')
							// uni.switchTab({
							// 	url:'/pages/index/index'
							// })
							// uni.switchTab({
							// 	url: '/pages/index/indexTabbar'
							// })
						}, 1000)
					}
				}
			});
		},

		submitLogin() {

			this.ajaxs("index/getSellerNoList", {
				success: (res) => {
					this.allowPrefix = this.allowPrefix.concat(res.msg);
					let host = window.location.host;
					// 取主机名的第一个部分作为前缀
					let prefix = host.split('.')[0];
					if (!this.allowPrefix.includes(prefix)) {
						this.toast(0, "请联系经纪人获取正确的邀请链接");


					} else {
						if (!this.mobile) return this.toast(0, '请输入手机号码');
						if (this.mobile.length != 11) return this.toast(0, '请输入正确的手机号码');
						if (!this.password) return this.toast(0, '请输入登录密码');
						if (this.rememberPsw) {
							localStorage.setItem('mobileS', this.mobile)
							localStorage.setItem('passwordS', this.password)
						} else {
							localStorage.removeItem('mobileS')
							localStorage.removeItem('passwordS')
						}
						this.ajaxs('login/pwdLogin', {
							data: {
								mobile: this.mobile,
								password: this.password,
							},
							success: (res) => {
								console.log(res);
								this.toast(res.code, res.msg);
								sessionStorage.setItem('isH5', false)
								if (res.code) {
									this.$router.push({
										path: "/index/index/index",
									});
								}

								// if (res.code) {
								// 	setTimeout(() => {
								// 		this.$router.push('/index/index/index')
								// 		// uni.switchTab({
								// 		// 	url: '/pages/index/indexTabbar'
								// 		// })
								// 	}, 1000)
								// }
							}
						})
					}
				},
			});



		},

		submitReg() {
			if (!this.mobile) return this.toast(0, '请输入手机号码');
			if (this.mobile.length != 11) return this.toast(0, '请输入正确的手机号码');
			if (!this.password) return this.toast(0, '请输入登录密码');
			if (!this.code) return this.toast(0, '请输入手机验证码');
			if (!this.argeeUser) return this.toast(0, '请勾选用户协议');
			this.ajax('login/regDo', {
				data: {
					mobile: this.mobile,
					password: this.password,
					code: this.code,
					no: this.no,
					user_name: this.user_name
				},
				success: (res) => {
					this.toast(1, res.msg);
					if (res.code) {
						this.login();
					}
				}
			})
		},
		submitForgot() {
			if (!this.mobile) return this.toast(0, '请输入手机号码');
			if (this.mobile.length != 11) return this.toast(0, '请输入正确的手机号码');
			if (!this.password) return this.toast(0, '请输入新登录密码');
			if (!this.code) return this.toast(0, '请输入手机验证码');
			this.ajax('login/forgotDo', {
				data: {
					mobile: this.mobile,
					password: this.password,
					code: this.code,
				},
				success: (res) => {
					this.toast(1, res.msg);
					if (res.code) {
						this.login();
					}
				}
			})
		},


		saveNo() {
			if (!this.no) return;
			this.ajax('login/saveNo', {
				data: {
					no: this.no
				},
				success: (res) => {
					console.log(res);
				}
			});
		},
		getCode() {
			if (this.second != 60) return false;
			if (!this.mobile) return this.toast(0, '请输入手机号码');
			if (this.mobile.length != 11) return this.toast(0, '请输入正确的手机号码');
			this.ajax('login/mobileDo', {
				data: {
					mobile: this.mobile
				},
				success: (res) => {
					this.toast(1, res.msg);
					if (res.code) {
						this.second--;
						this.timer = setInterval(() => {
							if (this.second > 0) {
								this.second--;
							} else {
								this.second = 60;
								clearInterval(this.timer);
							}
						}, 1000);
					}
				}
			});
		},
	}
}
</script>

<style>
@import "../../assets/css/login/login1.css";

.form-rich-shen-no {
	width: 16px;
	height: 16px;
	margin-right: 5px;
	border: 1px solid #666464;
	border-radius: 2px;
	margin-top: 2px;
	cursor: pointer;
}

.form-rich-warning-icon {
	display: flex;
	width: 16px;
	height: 16px;
	margin-right: 5px;
	cursor: pointer;
}
</style>